<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="700" destroy-on-close @closed="$emit('closed')">
		<el-row>
			<el-col>
				<el-date-picker v-model="list.query.start_time" type="date" value-format="YYYY-MM-DD" placeholder="开始时间" format="YYYY-MM-DD" style="width: 100%"/>
			</el-col>
			<el-col>
				<el-date-picker v-model="list.query.end_time" type="date" value-format="YYYY-MM-DD" placeholder="结束时间" format="YYYY-MM-DD" style="width: 100%"/>
			</el-col>
			<el-col>
				<el-button type="primary" @click="getSalary" icon="el-icon-search" style="width: 100%">搜索</el-button>
			</el-col>

			<el-col>
				<el-button type="primary" @click="printSalary" icon="el-icon-printer" style="width: 100%; margin-top: 10px">打印</el-button>
			</el-col>
		</el-row>
		<el-statistic title="工资/元" :value="salaryTotal" precision="3"></el-statistic>
		<el-descriptions title="工资 信息" :column="1" border>
			<el-descriptions-item v-for=" (val, key) in list.data" :key="key"  width="150px">
				<template #label>
					<div>{{val.procedure_name}}</div>
					<div>{{val.process_name}}</div>
				</template>

				
				<div>数量：{{val.number}}</div>
				<div>单价：{{val.price}}</div>
				<div>小计：{{val.money}}</div>
			</el-descriptions-item>
		</el-descriptions>
		
		<template #footer>
			<el-button @click="visible=false" >关闭</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import * as XLSX from 'xlsx'
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				mode: "add",
				titleMap: {
					add: '新增',
					edit: '编辑',
					show: '查看'
				},
				visible: false,
				form: {},
				list: {
					data: [],
					query: {
						start_time: '',
						end_time: '',
						id: ''
					}
				},
				salaryTotal: 0
			}
		},
		mounted() {
			
		},
		methods: {
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				this.list = {
					data: [],
					query: {
						start_time: '',
						end_time: '',
						id: '',
						salaryTotal: 0,
					}
				}
				return this
			},
			async getSalary() {
				this.list.data = []
				var res = await this.$API.staff.salary.get(this.list.query)
				if (res.code == 200) {
					this.list.data = res.data
					this.list.query.start_time = res.start_time
					this.list.query.end_time = res.end_time
					this.staffTotalSum()
				}
				console.log(res)
			},
			staffTotalSum() {
				this.salaryTotal = 0
				for (var i in this.list.data) {
					this.salaryTotal += parseFloat(this.list.data[i].money)
				}
			},
			//打印工资
			printSalary() {
				// console.log(XLSX)
				var arr = this.list.data.map(obj => Object.values(obj))
				// 添加表头
				var header_name = this.form.name + ' ' + this.list.query.start_time + '至' + this.list.query.end_time
				var arr_header = [
						header_name,
						'流程名',
						'工序',
						'单价',
						'小计'
					]
				// 添加尾部
				var arr_boot = [
						'',
						'',
						'',
						'合计工资:',
						this.salaryTotal
					]
				arr.unshift(arr_header)
				arr.push(arr_boot)
				// 将二维数组转换为工作表对象
				const ws = XLSX.utils.aoa_to_sheet(arr);
				// 创建一个新的工作簿对象
				const wb = XLSX.utils.book_new();
				// 将工作表对象添加到工作簿中，'Sheet1'为工作表的名称
				XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
				// 将工作簿数据写入文件，'exported_data.xlsx'为导出文件的名称
				XLSX.writeFile(wb, this.form.name + '.xlsx');    
			},
			//表单注入数据
			setData(data){
				this.form = this.$TOOL.objCopy(data)

				this.titleMap.show = this.form.name
				this.list.query.staff_id = this.form.id
				this.getSalary()
			}
		}
	}
</script>

<style>
</style>
